<template>
  <SeachTable 
    :tableType="1"
    ref="seachTableRef"
    class="rowKeySearchTable"
    :tableExpand="true"
    :forms="tableForms"
    :btnLefts="btnLefts"
    :btnRights="btnRights"
    :tableLoading="tableLoading"
    :tableConfig="tableConfig"
    :tableData="tableData"
    :totalPage="totalPage"
    :nativeAttribute="{expandRowKeys,rowKey:'id'}"
    @expand-change="expandChange"
    @handlerSearch="handlerSearch"
  >
    <template #expandSlot="{row,index}">
      <el-table :style="{background:index % 2 === 0 ? '#f9f9f9' : '#fff' }" class="expandTable" :data="row.secondLabelList" :show-header="false">
        <el-table-column width="50"></el-table-column>
        <el-table-column
          prop="labelName"
          label="一级标签名称"
        >
          <template #default="{row}">
            <span></span>
          </template>  
        </el-table-column>
        <el-table-column prop="labelName" label="二级标签名称"></el-table-column>
        <el-table-column
          prop="labelNumber"
          label="标签人数"
        >
          <template #default="{row}">
            <span @click="toMemberList(row)" style="color: #3480FF;cursor: pointer;">{{ row.labelNumber || 0 }}</span>
          </template>  
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="{row}">
            <el-button type="success" plain @click="editLabel(row)">编辑</el-button>
            <el-button type="danger" plain @click="deleteLabel(row)">删除</el-button>
          </template>  
        </el-table-column>
      </el-table>
    </template>
    <template #tagNum="{row}">
      <span @click="toMemberList(row)" style="color: #3480FF;cursor: pointer;">{{ row.labelNumber || 0 }}</span>
    </template>
  </SeachTable>
  <EditDialog
    :show="showEditDialog"
    @close="closeEditDialog"
    :isEdit="isEdit"
    :detail="dialogData"/>
</template>

<script setup>
import { useCurd,useLabelManagement } from './Hooks/index';
import { useMemberQuery } from '@/views/OperateManagement/MemberManagement/MemberChildManagement/Hooks/index'
import EditDialog from './Components/EditDialog.vue'

const {
  tableLoading,
  totalPage,
  tableData,
  btnLefts,
  btnRights,
  tableConfig,
  tableForms,
  handlerSearch,
  dialogData,
  showEditDialog,
  isEdit,
  closeEditDialog,
  deleteLabel,
  openEditDialog
} = useCurd();
const { seachTableRef } = useLabelManagement()
const editLabel =(row)=>{
  isEdit.value = true;
  openEditDialog(row);
}
const expandRowKeys = ref(['']);
const expandChange = (row) => {
  if (row.id === expandRowKeys.value[0]) {
    expandRowKeys.value[0] = '';
  } else {
    expandRowKeys.value[0] = row.id;
  }
};
watch(tableData,()=>{
  if(tableData.value.length > 0 && expandRowKeys.value[0] === ''){
    expandRowKeys.value[0] = tableData.value[0].id;
  }
})

const router = useRouter()
const { memberQuery } = useMemberQuery()
const toMemberList = (row)=>{
  const idList = [row.id,...(row.secondLabelList?.map(item=>item.id) ?? [])];
  router.push({
    path:'/operateManagement/memberManagement/memberChildManagement/memberChildManagementIndex',
  });
  memberQuery.value.labelManagementId = idList;
}
</script>

<style lang="less" scoped>
.rowKeySearchTable{
  :deep(.line-block){
    display: none;
  }
}
</style>